<template>
	<view>
		<view v-for="(item1,index) in songList" :key="index" class="sleepAid-box-music" >
			<view class="sleepAid-box-music_name" @click="playmusic(item1,index,item)">
				<view class="sleepAid-box-music_name_L">
					{{index+1}}{{"."+item1.name}}
				</view>
				<view class="sleepAid-box-music_name_R">
				</view>
			</view>
			<view class="sleepAid-box-music_info">
				<view>
					{{item1.time}}
				</view>
				<view>
					{{item1.album}}
				</view>
				<view>
					{{item1.author}}
				</view>
		        
		        <button class="cu-btn cuIcon text-right" @click="shoucang(item1)">
		            <text class='cuIcon-favor' v-if="item1.collect!=1"></text>
		            <text class='cuIcon-favorfill' v-if="item1.collect==1"></text>
		        </button>
		        
		     <!--  <view  @click="shoucang(item1)" :class="{'sleepAid-box-data_collection-selected':item.collect===1}">
		            {{item1.collect===1?"已收藏":"收藏"}}
		        </view> -->
			</view>
		    
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				songList:[
                    {
                        name: "晨风", //歌曲名
                        time: "01:54", //歌曲时长
                        album: "HIFIVE MUSIC", //所属专辑
                        author: "蜗牛睡眠", //作者
                        src: 'http://sleepclound.ltd:9000/temp/music/ShakingHigh%20-%20ECHO%EF%BC%88%E4%BA%94%E4%BA%BA%E5%94%B1%E8%A7%81%E5%8F%8C%E5%A3%B0%E9%81%93%EF%BC%8FShakingHigh%20Remix%EF%BC%89.mp3', // OSS 文件存储服务/系统
                        collect:'1'
                    }, {
                        name: "春夜喜雨",
                        time: "02:36",
                        album: "HIFIVE MUSIC",
                        author: "蜗牛睡眠",
                        src: 'http://music.163.com/song/media/outer/url?id=866018207.mp3',
                        collect:'1'
                    }, {
                        name: "冬",
                        time: "03:30",
                        album: "HIFIVE MUSIC",
                        author: "蜗牛睡眠",
                        src: 'http://music.163.com/song/media/outer/url?id=430685718.mp3',
                    }, 
                ]
			}
		},
		methods: {
			
		}
	}
</script>

<style  lang="scss">
    @import url("../sleepAid/sleepAid.css");
    .song-title{
    	margin: 30upx;
    }
    .song-name{
    	text-align: center;
    	color: #FFFFFF;
    	font-size: 35upx;
    	margin-top: 30upx;
    
    }
    .song-author{
    	text-align: center;
    	color: #FFFFFF;
    	font-size: 25upx;
    }
    .info{
    	/* position: relative; */
    	/* position: fixed;
    	z-index: 999;
    	bottom: 1rpx;
    	height: 120rpx;
    	display: flex;
    	flex-direction: row; */
    	position: fixed;
    	width: 100%;
    	bottom: 0;
    	z-index: 1024;
    	background-color: #0081ff;
    	/* margin: 30upx; */
    	border-radius:5px
    }
    .iconbtn{
    	width: 60upx;
    	height: 60upx;	
    	margin-left: 30upx;
    	margin-right: 30upx;
    
    }
    .imt-audio {
    	padding: 30upx;
    	background: #fff;
    	border-radius: 20upx;
    }
    
    .audio-wrapper {
    	display: flex;
    	align-items: center;
    	margin: 30upx;
    }
    
    .audio-number {
    	font-size: 24upx;
    	line-height: 1;
    	color: #FFFFFF;
    }
    
    .audio-slider {
    	flex: 1;
    	margin: 0 30upx;
    }
    
    .audio-control-wrapper {
    	margin-top: 20upx;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	font-family: "iconfont" !important;
    
    }
    
    
    
</style>
